<template>
	<view class="container">
		<image :src="$getImgUrl('home/bg.png')" mode="aspectFill" class="img-bg"></image>

		<uni-header :fixed="false" class="header" title="潮玩魔盒" color="#333" background="" :border="false"></uni-header>

		<view class="detail-view flex-col">
			<view :style="{ height: $statusBarHeight() + 65 + 'px' }"></view>

			<view class="right-fixed-view flex-col-center">
				<view class="right-fixed-item">
					<button open-type="share" class="share-btn flex-col-center">
						<image :src="$getImgUrl('home/ic_xq_fx.png')" mode="width"></image>
						<view>分享</view>
					</button>
				</view>

				<view class="right-fixed-item flex-col-center" @click="$navTo('pages/store/store')">
					<image :src="$getImgUrl('home/ic_xq_hg.png')" mode="width"></image>
					<view>盒柜</view>
				</view>

				<view class="right-fixed-item flex-col-center" @click="$navTo('pages/mine/agreement/agreement', { type: 4 })">
					<image :src="$getImgUrl('home/ic_xq_gz.png')" mode="width"></image>
					<view>规则</view>
				</view>

				<view class="right-fixed-item flex-col-center" @click="onMore">
					<image :src="$getImgUrl('home/ic_xq_gd.png')" mode="width"></image>
					<view>更多</view>
				</view>
			</view>

			<view class="award-img-view">
				<swiper class="award-swiper" :circular="true" @change="onGoodsChange">
					<swiper-item v-for="(item, index) in swiperGoodsList" :key="index" class="award-swiper-item flex-col-center">
						<image :src="item.img" mode="heightFix" class="award-img controller"></image>
						<view class="award-kuan">
							<image :src="$getImgUrl('home/ic_oqk.png')" mode="widthFix"></image>
							<view class="award-kuan-text flex-center">{{ $getSignText(item.type) }}</view>
						</view>
						<view class="lijian flex-col-center">
							<view class="lijian-title">{{ item.name }}</view>
							<view class="lijian-price">
								￥
								<text>{{ item.price }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<image :src="$getImgUrl('home/ic_sw.png')" mode="widthFix" class="img-try" @click="onTry"></image>
			</view>
			<!-- 概率 -->
			<view class="huodegailv flex-row-between">
				<view class="huodegailv-item flex-row-center" v-for="(item, index) in gailvList" :key="index">
					<view class="huodegailv-text" :style="{ color: getColor(item.id) }">·{{ item.name }}</view>
					<view class="huodegailv-val">{{ Number(item.val).toFixed(1) }}%</view>
				</view>
			</view>

			<view class="goods-view">
				<view class="goods-view-title flex-center">
					<image :src="$getImgUrl('home/ic_icon.png')" mode="widthFix"></image>
					<text class="title">以下商品随机得一件</text>
				</view>
				<view style="height: 36rpx"></view>

				<view class="goods-view-list">
					<scroll-view scroll-x="true" class="scroll-x-view">
						<view class="goods-view-item" v-for="(item, index) in goodsList" :key="index" @click="onDetail(item)">
							<view class="goods-view-img">
								<image :src="item.img" mode="aspectFill"></image>
								<view class="kuan">{{ $getSignText(item.type) }}</view>
							</view>
							<view class="goods-view-name ellipsis">{{ item.name }}</view>
							<view class="goods-view-price">￥{{ item.price }}</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view style="background: #F6F7FB; height: 12rpx; position: relative;"></view>
			<!-- 评价列表 -->
			<view class="comment-view">
				<view class="comment-title flex-row-between">
					<view class="comment-title-text">
						用户评价
						<text>({{ commentNum }}条)</text>
					</view>
					<view v-if="commentList.length" class="comment-title-more flex-row-center" @click="$navTo('pages/manghe/all-comment/all-comment')">
						<text>查看全部</text>
						<u-icon size="12" color="#999" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="comment-item" v-for="(item, index) in commentList" :key="index">
					<view class="comment-user flex-row-center">
						<image :src="$getImgUrl('home/ic_bg.png')" mode="aspectFill"></image>
						<text>分就开始</text>
					</view>

					<view class="star-view flex-row-center">
						<image :src="$getImgUrl('home/ic_xing1.png')" mode="widthFix" class="img-xing" v-for="(item, index) in 3" :key="index"></image>
						<image :src="$getImgUrl('home/ic_xing2.png')" mode="widthFix" class="img-xing" v-for="(item, index) in 2" :key="index"></image>
						<text>| 流沙90ml清新幻彩鎏金黑鸦片香水</text>
					</view>
					<view class="comment-content">首先特别感谢基地回到了家平台让我认识啊荆轲的老师 觉 得你号放假啥都能</view>
				</view>
			</view>

			<view style="background: #F6F7FB; height: 12rpx"></view>
			<view class="comment-view">
				<view class="comment-title flex-row-between"><view class="comment-title-text">全部商品</view></view>
				<view class="huodegailv flex-row-between" style="padding: 0 0 30rpx;">
					<view class="huodegailv-item flex-row-center" v-for="(item, index) in gailvList" :key="index" @click="onTabClick(item, index)">
						<view class="huodegailv-text" :style="{ color: getColor(item.id) }">·{{ item.name }}</view>
						<view class="huodegailv-val">{{ Number(item.val).toFixed(1) }}%</view>
					</view>
				</view>

				<view class="goods-list-view flex-row">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="onDetail(item)">
						<image :src="item.img" mode="aspectFill"></image>
						<view class="goods-sign">{{ $getSignText(item.type) }}</view>
						<view class="goods-name ellipsis">{{ item.name }}</view>
						<view class="yincang">隐藏款概率：{{ item.gailv }}%</view>
						<view class="goods-price-view">
							参考价： ￥
							<text>{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="btn-view flex-center">
			<view class="btn-item" @click="onBuy(1)">
				<image :src="$getImgUrl('home/ic_czlc.png')" mode="widthFix"></image>
				<view class="buy-text flex-center">
					立即购买 | ￥
					<text>{{ goods.price }}</text>
				</view>
			</view>
		</view>

		<!-- 保底商品详情 -->
		<uni-popup ref="detail" type="bottom">
			<view class="detail-goods-view">
				<view class="detail-goods-title flex-row-between">
					<text>商品详情</text>
					<image :src="$getImgUrl('home/ic_gb1.png')" mode="widthFix" @click="$refs.detail.close()"></image>
				</view>
				<scroll-view scroll-y="true" class="goods-scroll-view">
					<image :src="goodsDetail.img" mode="widthFix" class="goods-detail-img"></image>
					<view class="xiangqing">
						<view class="detail-name flex-row-center">
							<view class="detail-kuan flex-center">
								<image :src="$getImgUrl('home/ic_kuang1.png')" mode="widthFix"></image>
								<text>{{ $getSignText(goodsDetail.type) }}</text>
							</view>

							<view class="detail-name-text">{{ goodsDetail.name }}</view>
						</view>
						<view class="goods-sign-view flex-row-center" style="padding: 15rpx 0px;">
							<view class="goods-sign-item">正品保障</view>
							<view class="goods-sign-item sign-chaoshi">超时赔付</view>
							<view style="flex:1"></view>
							<text class="gailv">概率{{ goodsDetail.gailv }}%</text>
						</view>
						<view class="goods-price" style="padding: 0;">
							￥
							<text>{{ goodsDetail.price }}</text>
						</view>
					</view>

					<view style="height: 14rpx; width: 100%;background: #F6F7FB;"></view>
					<image :src="item" mode="widthFix" v-for="(item, index) in goodsDetail.details" :key="index" class="detail-img"></image>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script src="./detail.js"></script>

<style lang="scss">
@import '@/style/common.scss';
@import './detail.scss';
</style>
